<template>
  <div>
     <h1>我是非语法糖写法</h1>
     <h1>{{count}}</h1>
     <button @click="add">加1</button>
     <h1>{{countTwo}}</h1>
     <h1>{{msg}}</h1>
     <button @click="toSend">子传父数据</button>
  </div>
</template>
<script >
// vue3 非语法糖写法
import {ref,reactive,computed,defineComponent} from 'vue'
// defineComponent() 非语法糖写法时候 用的函数包裹整个配置项api 防止一些错乱
export default defineComponent ({
  name: 'Jinsi',
  // vue3的非语法糖是setup 变为配置项
  // setup是函数，需要用return 返回组件需要的内容
  props:{
    msg:{
      type:String,
      default:'我是默认值'
    }
  },
  setup(props,context){
    // props是一个对象，包含了父组件传递过来的所有属性
    // 接受父传子的数据
    // console.log(context,'------')
    // context.emit("事件",传值)  // 触发自定义事件 用于子传父
    // context.attrs  //获取除props之外的父传子数据 的
    // context.slots  // 获取插槽
    // context.expose()  // 暴露组件内部属性方法
        let count=ref(0)
        let add=()=>{
          count.value++
        } 
        let countTwo=computed(()=>{
          return count.value*2
        })
        // 子传父 
        let toSend=()=>{
          context.emit("sendName","李小龙")
        }
      console.log(props.msg,'父传子数据')
        return {
          count,
          add,
          countTwo,
          toSend
        }
  }
})
</script>